<template>
	<div style="padding-bottom: 50px; height: 100%; background-color: #fff">
		<van-search
			v-model="data.keyword"
			placeholder="请输入关键词"
			style="height: 50px"
			@search="handleGetArticleList"
		/>
		<van-tabs v-model:active="data.typeId" @change="handleGetArticleList">
			<van-tab
				v-for="item in data.typeList"
				:key="item.id"
				:name="item.id"
				:title="item.title"
			>
				<van-empty
					v-if="!data.articleList.length"
					description="内容为空"
				/>
				<div style="width: 100%">
					<div
						v-for="item in data.articleList"
						:key="item.id"
						style="
							display: flex;
							padding: 10px 0;
							border-bottom: 1px solid #ccc;
						"
						@click="handleToDetail(item)"
					>
						<div style="margin: 0 10px">
							<img
								:src="'http://localhost:3000/' + item.cover"
								style="
									width: 100px;
									height: 100px;
									border-radius: 4px;
								"
								alt=""
							/>
						</div>
						<div>
							<div
								style="
									font-size: 20px;
									color: #222;
									font-weight: 700;
								"
							>
								{{ item.title }}
							</div>
							<div
								style="
									margin: 10px 0;
									display: flex;
									align-items: center;
								"
							>
								<span style="padding-right: 10px">{{
									item.createTime
								}}</span>
								<van-tag type="warning">{{
									item.etymology_type.title
								}}</van-tag>
							</div>
						</div>
					</div>
				</div>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import {
	getEtymologyTypeList,
	getEtymologyByTypeAndKeyword,
} from "@/api/basic";
import dayjs from "dayjs";

const router = useRouter();
const data = reactive({
	typeId: "",
	typeList: [],
	keyword: "",
	articleList: [],
});

const handleGetTypeList = async () => {
	const res = await getEtymologyTypeList();
	data.typeList = res.result.list;
	if (data.typeList.length) {
		data.typeId = data.typeList[0].id;
		handleGetArticleList();
	}
};
handleGetTypeList();

const handleGetArticleList = async () => {
	const res = await getEtymologyByTypeAndKeyword({
		keyword: data.keyword,
		typeId: data.typeId,
	});
	data.articleList = res.result.list.map(ele => {
		return {
			...ele,
			createTime: dayjs(ele.createTime).format("YYYY-MM-DD"),
		};
	});
};

const handleToDetail = item => {
	router.push({
		path: "/etymologyDetail",
		query: {
			id: item.id,
		},
	});
};
</script>
<style scoped></style>
